<script setup lang="ts">
const keyword = ref('');
const inputEle = ref();
const debouncedKeyword = refDebounced(keyword, 500);
useFocus(inputEle, { initialValue: true });
</script>

<template>
  <div class="search">
    <input ref="inputEle" type="text" v-model="keyword" placeholder="请输入关键字" />
    <SvgIcon v-show="keyword !== ''" @click="keyword = ''" name="icon-close"></SvgIcon>
  </div>
  <ProductList :keyword="debouncedKeyword"></ProductList>
</template>

<style lang="scss" scoped>
.search {
  position: relative;

  input {
    width: 335rem;
    height: 40rem;
    margin: 20rem;
    border: none;
    outline: none;
    border-bottom: 1px solid var(--border-color);
    font-size: 24rem;
  }

  svg {
    font-size: 24rem;
    position: absolute;
    top: 28rem;
    right: 25rem;
  }
}
</style>
